<template>
    <div style="500px">
        <pie height="500px" width="500px" :series="[{value: numMale,name:'Male'},{value: numFemale,name:'Female'}]"/>
    </div>
</template>
<script>
import pie from '@/components/Charts/Pie'
import { getList } from '@/api/student'
export default {
    name: 'Pie',
    components: { pie },
     data() {
    return {
      numFemale: undefined,
      numMale: undefined,
      list: [],
      listQuery: {
        page: 1,
        limit: 200,
        name: undefined
      }
    }
  },
  created() {
    this.fetchDate()
  },
  methods: {
    fetchDate() {
      getList(this.listQuery).then((response) => {
        this.list = response.data.items
        const mList = this.list.filter(item => {
          return item.gender === 'M'
        })
        this.numMale = mList.length
        this.numFemale = this.list.length - this.numMale
      })
    }
  }
}
</script>
<style scoped>
</style>
